<template>
 <div class="container">
    <div class="app-container">
        <div class="header">
            <div class="approvaling">
                <div>当前审批中</div>
                <span>{{approvalData.approveCount}}</span>
            </div>
            <div class="approvaled">
                <div>本月审批通过</div>
                <span>{{ approvalData.currApproveCount }}</span>
            </div>
            <div class="not-approval">
                <div>本月审批驳回</div>
                <span>{{ approvalData.rejectionCount }}</span>
            </div>
        </div>
        <div class="content">
            <el-table
                ref="multipleTable"
                :data="approvalList"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column             
                type="selection"
                width="30">
                </el-table-column>
                <el-table-column             
                type="index"
                 label="序号">
                </el-table-column>
                <el-table-column
                label="审批类型"
                prop="processName"
                sortable
                >
                </el-table-column>
                <el-table-column
                sortable
                label="申请人"
                prop="username"
                >
                </el-table-column>
                <el-table-column
                prop="procCurrNodeUserName"
                label="当前审批人"
                show-overflow-tooltip
                sortable>
                </el-table-column>
                <el-table-column
                label="审批发起时间"
                sortable
                show-overflow-tooltip
                prop="procApplyTime">
                </el-table-column>
                <el-table-column
                sortable
                label="审批状态"
                show-overflow-tooltip
                prop="state">
                </el-table-column>
                <el-table-column
                label="操作"
                show-overflow-tooltip>
                <el-button type="text" @click="goToDetail">查看</el-button>
                </el-table-column>
            </el-table>
        </div>
    </div>
 </div>
</template>

<script>
import {getApprovalList} from  '@/api/approval'
export default {
    data() {
        return {
            approvalList: [],
            state: {
                0: '已提交',
                1: '审批中',
                2: '审批通过',
                3: '审批不通过',
                4: '已撤销'
            },
            approvalData: {}
        }
    },
    methods: {
        async getApproval() {
            const res = await getApprovalList({
                page: '1',
                pageSize: '10'
            })
            console.log(res);
            res.rows.forEach(item => {
                item.state = this.state[item.processState]
            })
            this.approvalList = res.rows
            // console.log(this.approvalList);
            this.approvalData = res

        },
        goToDetail() {
            this.$router.push('/approval/detail')
        }
    },
    created() {
        this.getApproval()
    }

}
</script>

<style lang="scss" scoped>
.app-container {
    background-color: #f5f6f8;
}
.header {
    height: 80px;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    margin-bottom: 20px;
    >div {
        margin-left: 20px;
        text-align: center;
        >div {
            margin-bottom: 10px;
            // font-weight: 700;
        }
        >span {
            font-weight: 700;
            font-size: 20px;
        }
    }
}
.content  {
    width: 100%;
    height:400px;
    // margin-top: 20px;
    background-color: #fff;
    .el-table {}
}
</style>